<template>
	<view>
		<u-toast ref="uToast" />
		<view class="relocation-content">
			<view class="relo-header">
				<uni-forms ref="form" :modelValue="params" :rules="rules" :label-width="50">
					<uni-forms-item label="收货单" name="deliverNo" :label-align="labelAlign" :label-width="70">
						<uni-easyinput ref="inputSelect" size="small" id="inputSelect" focus suffixIcon="search"
							trim="all" @focus="_inputFocus" v-model="params.deliverNo" maxlength="32"
							placeholder="请输入单号" confirm-type="search" @confirm="handleSearch()"
							@iconClick="handleSearch"></uni-easyinput>
					</uni-forms-item>
					<!-- <uni-forms-item label="关键字" name="contNo" :label-align="labelAlign" :label-width="70">
						<uni-easyinput ref="contNo" v-model="spuKey" @blur="keyBlur" maxlength="6"
							placeholder="器材关键字"></uni-easyinput>
					</uni-forms-item> -->
					<uni-forms-item label="器材名称" label-align="right" :label-width="70">
						<uni-data-select :disabled="selDisable" placeholder="可选择器材名称" v-model="spuNo" :localdata="range"
							@change="selectChange"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="容器条码" name="contNo" :label-align="labelAlign" :label-width="70">
						<uni-easyinput ref="contNo" v-model="params.contNo" maxlength="8"
							placeholder="请输入容器条码"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="实际数量" name="num" :label-align="labelAlign" :label-width="70">
						<uni-easyinput ref="num" v-model="params.num" type="number" maxlength="6"
							placeholder="请输入数量"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
			</view>
			<swiper class="relo-text" :current="currentIndex" :duration="500" :virtualize="true"
				@change="currentChange">
				<swiper-item v-for="(item,index) in listData" :key="index" class="form-swiper">
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>收货单：</text>
							<view class="swiper-content">
								{{item.deliverNo}}
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>器材编号：</text>
							<view class="swiper-content">
								{{item.spuNo}}
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>器材名称：</text>
							<view class="swiper-content">
								{{item.spuName}}
							</view>
						</uni-col>
					</uni-row>
					<uni-row class="swiper-item">
						<uni-col :span="12">
							<text>计划数量：</text>
							<view class="swiper-num">
								【{{item.planQty}}】
							</view>
						</uni-col>
						<uni-col :span="12">
							<text>已收数量：</text>
							<view class="swiper-num">
								【{{item.bindQty}}】
							</view>
						</uni-col>
					</uni-row>
					<!-- <uni-row class="swiper-item">
						<uni-col :span="24">
							<text>计量单位：</text>
							<view class="swiper-des">
								{{item.unitCode}}
							</view>
						</uni-col>
					</uni-row> -->
					<uni-row class="swiper-item">
						<uni-col :span="24">
							<text>收货日期：</text>
							<view class="swiper-des">
								{{item.createDate}}
							</view>
						</uni-col>
					</uni-row>
				</swiper-item>
			</swiper>
			<uni-pagination :show-icon="true" :total="total" :pageSize="1" :current="currentIndex + 1" title="标题文字"
				@change="handleChange" />
		</view>
		<button class="next" type="primary" @click="confirm">确认收货</button>
		<button class="next" type="primary" @click="release">入库放行</button>
	</view>
</template>
</script>
<script>
	import {
		purchaseSearch,
		registerConfirm,
		contRelease
	} from '@/api/request.js'
	import {
		rules
	} from '../config/form.js'
	export default {
		name: 'rf-form',
		data() {
			return {
				selDisable: true,
				listData: [],
				// 存储数据
				clistData: [],
				range: [],
				rules: rules,
				spuNo: '',
				params: {
					deliverNo: '',
					lineNo: '',
					purchaseNo: '',
					contNo: '',
					spuSize: '',
					spuWeight: '1',
					planQty: '',
					num: '',
					limit: 1000,
					page: 1
				},
				labelAlign: 'right',
				total: 1,
				currentIndex: 0,
				weightUnit: 'kg',
				spuKey: ''
			};
		},
		methods: {
			// 器材关键字失焦触发
			keyBlur() {
				let range = this.clistData.filter((item) => item.spuName.includes(this.spuKey))
				this.initSelect(range)
			},
			// 轮播下标更新
			currentChange({
				detail
			}) {
				this.currentIndex = detail.current
			},
			// 选择器材 
			selectChange(e) {
				if (!e) {
					this.listData = []
				} else {
					this.listData = this.clistData.filter((item) => item.spuNo === e)
				}
				console.log(this.clistData, this.listData);
				this.total = this.listData.length
				this.currentIndex = 0
			},
			// 输入框聚焦全选
			_inputFocus(event) {
				document.querySelector('#inputSelect input').select()
			},
			confirm() {
				if (this.listData.length === 0 || this.listData == null) {
					uni.showModal({
						title: '失败提示',
						confirmColor:'#F54E40',
						showCancel: false,
						content: '请扫描或输入单号信息！',
					})
					return;
				}
				// 表单校验
				this.$refs.form.validate().then(res => {
					const selData = this.listData[this.currentIndex]
					const confirmParams = {
						detailId: selData.detailId,
						contNo: res.contNo,
						spuNo: selData.spuNo,
						num: res.num,
						stationNo: '1F_IN_ST11',
						userId: '1004'
					}
					uni.showModal({
						title: '收货提醒',
						showCancel: true,
						content: `是否收[${selData.spuNo}]数量[${res.num}]目标托盘[${res.contNo}]`,
						success: (con) => {
							if (con.confirm) {
								// 点击确认按钮请求收获接口
								registerConfirm(confirmParams, (res) => {
									if (res.code === 0) {
										uni.showModal({
											title: '成功信息',
											confirmColor:'#00ff00',
											showCancel: false,
											content: res.data,
											success: (res) => {
												if (res.confirm) {
													this.currentIndex = 0
													this.query()
												}
											}
										})
									} else {
										uni.showModal({
											title: '失败提示',
											confirmColor:'#F54E40',
											showCancel: false,
											content: res.msg,
										})
									}
								})
							}
						}
					})
				}).catch(error => {
					console.log(error)
				})
			},
			release() {
				// 表单校验
				const releaseParams = {
					contNo: this.params.contNo,
					userId: '1004'
				}
				uni.showModal({
					title: '放行提醒',
					showCancel: true,
					content: `已收器材是否放入容器?是否放行容器[${this.params.contNo}]`,
					success: (con) => {
						if (con.confirm) {
							// 点击放行按钮(放行完成无需再次查询)
							contRelease(releaseParams, (res) => {
								if (res.code === 0) {
									uni.showModal({
										title: '成功信息',
										confirmColor:'#00ff00',
										showCancel: false,
										content: res.data,
										success: (res) => {
											if (res.confirm) {
												this.currentIndex = 0
												// this.query()
											}
										}
									})
								} else {
									uni.showModal({
										title: '失败提示',
										confirmColor:'#F54E40',
										showCancel: false,
										content: res.msg,
									})
								}
							})
						}
					}
				})
			},
			// 检验输入是否为空
			checkInput() {
				return false;
			},
			// 翻页
			handleChange(e) {
				this.currentIndex = e.current - 1
			},
			// 搜索按钮点击
			handleSearch() {
				if (!this.params.deliverNo) {
					return;
				}
				this.query()
			},
			// 搜索列表
			query(flag) {
				uni.showLoading()
				purchaseSearch(this.params, (res) => {
					console.log("res:",res);
					if (res.code === 0 && res.data) {
						this.listData = res.data
						this.clistData = JSON.parse(JSON.stringify(res.data))
						this.total = res.data.length
						this.initSelect(this.clistData)
					} else if (res.code != 0) {
						uni.showModal({
							title: '失败提示',
							confirmColor:'#F54E40',
							showCancel: false,
							content: res.msg,
						})
						this.listData = {}
					}
					this.clearText()
				})
			},
			// 格式化下拉框数据
			initSelect(dataList) {
				this.selDisable = false
				this.range = []
				dataList.forEach((item, index) => {
					this.range.push({
						value: item.spuNo,
						text: item.spuName,
					})
				})
			},
			clearText() {
				this.params.actlQty = ''
				this.spuNo = ''
			},
			// 扫码获取单号
			scanClick(e) {
				console.log(e)
				uni.scanCode({
					success: (res) => {
						this.params.purchaseNo = res.result
						this.params.num = 0
						this.query()
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	@import url("@/static/styles/form.scss");
</style>
<style scoped>
	::v-deep .is-disabled {
		color: black;
	}

	.relocation-content .relo-header {
		padding-bottom: 0;
	}

	.unit {
		margin-right: 5px;
	}
</style>